import React, { useEffect, useState } from 'react';
import './search.scss'
import { Button,Checkbox, Select, Input,DatePicker,Table,Tag,Switch } from 'antd';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
import type { Dayjs } from 'dayjs';
import * as service from '../../../api/tzp'
import type { ColumnsType } from 'antd/es/table';
import {useNavigate } from 'react-router-dom'


interface DataType {
    key: string;
    id: number, 
    vip: string,
    name: string,
    phone:string,
    flag:number,
    num:number,
    money:number,
    time:string
}

function Search(props: any) {
    // 多选框
    const CheckboxGroup = Checkbox.Group;
    const plainOptions = ['不限', '普通', '金卡', '银卡', '白金', '钛金'];
    const defaultCheckedList = ['不限'];
    const [checkedList, setCheckedList] = useState<CheckboxValueType[]>(defaultCheckedList);
    const onChange = (list: CheckboxValueType[]) => {
        // 搜索数据
        console.log('list',list);
        setCheckedList(list);
    };
    // 日期选择框
    const { RangePicker } = DatePicker;
    const [dates, setDates] = useState<RangeValue>(null);
    const [value, setValue] = useState<RangeValue>(null);
    type RangeValue = [Dayjs | null, Dayjs | null] | null;
    const disabledDate = (current: Dayjs) => {
      if (!dates) {
        return false;
      }
      const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
      const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;
      return !!tooEarly || !!tooLate;
    };
  
    const onOpenChange = (open: boolean) => {
      if (open) {
        setDates([null, null]);
      } else {
        setDates(null);
      }
    };
    // 选择器
    const handleChange = (value: string) => {
        console.log('选择器'+value);
        
        console.log(`selected ${value}`);
      };
    //   请求用户列表
    var [tableData,setTableData] = useState<DataType[]>([])
      var user = async ()=>{
        var res = await service.user_list()
        console.log(res);
        setTableData(res.data)
      }
      useEffect(()=>{
        user()
      },[])
      
       //表格列表的配置
    const columns: ColumnsType<DataType> = [
        {
            title: '序号', 
            align: 'center',
            render: ( _ ,record) => <a>{ tableData.indexOf(record)+1 }</a>,
        },
        {
            title: '用户信息', 
            dataIndex: 'name', 
            key: 'name',
            align: 'center',
            width:170,
            render: ( _ ,record) => <div className='user' style={{textAlign:'left',display:'flex',justifyContent:'space-between'}}><div className='img'><img src="https://cdn7.axureshop.com/demo/1903216/images/%E7%9B%B4%E6%92%AD%E6%95%B0%E6%8D%AE/u2428.svg" alt="" /></div><div className='right'><div>{record.name}</div><div>{record.phone}</div></div></div>,
        },
        {
            title: '会员等级', 
            key: 'vip',
            align: 'center',

            render: ( _ ,record) => <div >{record.vip}</div>,
        },
        {
            title: '消费次数', 
            key: 'num',
            align: 'center',

            render: ( _ ,record) => <div >{record.num}</div>,
        },
        {
            title: '消费金额', 
            key: 'money',
            align: 'center',

            render: ( _ ,record) => <div >{record.money}</div>,
        },
        {
            title: '用户状态', 
            dataIndex: 'flag',
            key: 'flag',
            align: 'center',
            render: (text, record) => <Switch defaultChecked={text} />
    
        },
        {
            title: '注册时间', 
            key: 'time',
            align: 'center',
            render: ( _ ,record) => <div >{record.time}</div>,
        },
        {
            title: '操作',
            key: 'tip',
            align: 'center',
            render: ( _ ,record ) => {
                return <>
                    <Button  style={{color:'blue'}} onClick={()=>{del(record.id)}}>删除</Button>
                    <Button  style={{color:'blue'}} onClick={()=>{detail(record.id)}}>用户详情</Button>
                </>
            },
        },
    ]
    let Navigate = useNavigate()
    var detail=(id:any)=>{
        Navigate('/index/detail/'+id)
    }
    // 输入框内容
    var [inputText,setinputText] = useState('')
    var intchange = (e:any)=>{
        console.log(e.target.value);
        setinputText(e.target.value)
    }
    var check = async()=>{
       var ok = await service.search_list({name_like:inputText})
       console.log(ok);
       setTableData(ok.data)
       
    }
    // 删除数据
    var del =async (id:any)=>{
       var remove = await service.delete_user({id:id})
       console.log(remove);
       var res = await service.user_list()
        console.log(res);
        setTableData(res.data)
    }
    // 新增会员
    var addvip = ()=>{
        Navigate('/index/addvip')
    }
    return (
        <div className='search'>
            <div className='title-box'>
                <div className='title-top'>用户管理 / 用户查询</div>
                <div className='title-bottom'>用户查询</div>
            </div>
            <div className='search-box'>
                <div className='grade'>
                    <div className='grade-left'>会员等级</div>
                    <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} /> 
                </div>
                <div className='data'>
                    <div className='data-left'>注册日期</div>
                    <RangePicker
                        value={dates || value}
                        disabledDate={disabledDate}
                        onCalendarChange={(val) => setDates(val)}
                        onChange={(val) => setValue(val)}
                        onOpenChange={onOpenChange}
                    />
                </div>
                <div className='Precision'>
                    <div className='left-box'>
                        <div className='Precision-left'>精准查询</div>
                        <Select
                            defaultValue="用户id"
                            style={{ width: 120 }}
                            onChange={handleChange}
                            options={[
                                { value: '用户id', label: '用户id' },
                                { value: '手机号', label: '手机号' },
                                { value: '用户姓名', label: '用户姓名' },
                                { value: '用户微信号', label: '用户微信号' },
                            ]}
                        />
                        <Input className='input-box' onChange={(e)=>{intchange(e)}} placeholder="请输入" style={{width:200}} />
                    </div>
                    <div className='right-box'>
                        <button onClick={()=>{check()}}>查询</button>
                        <button>重置</button>
                    </div>
                </div>
            </div>
            <div className='user-list'>
                 <div className='list_box'>
                    <div className='list-left'><div className="list-title">用户列表</div></div>
                    <div className='list-right'>
                        <button onClick={()=>{addvip()}}>新建</button>
                        <button>全部删除</button>
                    </div>
                </div>
                <Table columns={columns} dataSource={tableData} style={{marginTop:20}} rowKey="id"/>
            </div>
        </div>
    );
}

export default Search;